// Register a global custom directive called v-focus
function AttachPlacehoder(element, placeholder = "sds", style = "") {
    if (element.has(".aui-form-placeholder").length < 1) {
        element.append(`<div class='aui-form-placeholder' style="${style}"><div class="aui-form-placeholder__inner">${placeholder}</div></div>`);
    }
}

function setEmpty(s) {
    var parentNode = s.element.parent();
    if (!parentNode.hasClass("empty")) {
        parentNode.addClass("empty")
    }
    if (!s.element.hasClass("empty")) {
        s.element.addClass("empty")
    }
    if (s.element.hasClass("not-empty")) {
        s.element.removeClass("not-empty")
    }
}

function setUnEmpty(s) {
    var parentNode = s.element.parent();
    if (parentNode.hasClass("empty")) {
        parentNode.removeClass("empty")
    }
    if (s.element.hasClass("empty")) {
        s.element.removeClass("empty")
    }
    if (!s.element.hasClass("not-empty")) {
        s.element.addClass("not-empty")
    }
}

Vue.directive('input-validate', {
    bind: function (el, binding, vnode) {
        var s = _.get(vnode.context, binding.expression);
        if (s) {
            s.element = $(el);
            s.isValidateError = false;
            s.dirty = false;
            if (_.isString(el.value) && el.value.length < 1) {
                setEmpty(s);
            } else {
                setUnEmpty(s);
            }
            s.onEmpty = function () {
                setEmpty(s);
            };
            s.onUnEmpty = function () {
                setUnEmpty(s);
            };
            s.onChange = function () {
                var parentNode = s.element.parent();
                if (!s.dirty) {
                    s.dirty = true;
                    if (!parentNode.hasClass("dirty")) {
                        parentNode.addClass("dirty")
                    }
                    if (!s.element.hasClass("ng-dirty")) {
                        s.element.addClass("ng-dirty")
                    }
                }
            };
            s.onValidateError = function () {
                var parentNode = s.element.parent();
                if (!parentNode.hasClass("validate-error")) {
                    parentNode.addClass("validate-error")
                }
                if (parentNode.hasClass("validate-success")) {
                    parentNode.removeClass("validate-success")
                }
                if (!s.element.hasClass("ng-invalid")) {
                    s.element.addClass("ng-invalid")
                }
                if (s.element.hasClass("ng-valid")) {
                    s.element.removeClass("ng-valid")
                }
            };
            s.onValidateSuccess = function () {
                var parentNode = s.element.parent();
                if (!parentNode.hasClass("validate-success")) {
                    parentNode.addClass("validate-success")
                }
                if (parentNode.hasClass("validate-error")) {
                    parentNode.removeClass("validate-error")
                }
                if (s.element.hasClass("ng-invalid")) {
                    s.element.removeClass("ng-invalid")
                }
                if (!s.element.hasClass("ng-valid")) {
                    s.element.addClass("ng-valid")
                }
            };
            s.reset = function () {
                var parentNode = s.element.parent();
                s.dirty = false;
                if (parentNode.hasClass("validate-success")) {
                    parentNode.removeClass("validate-success")
                }
                if (parentNode.hasClass("validate-error")) {
                    parentNode.removeClass("validate-error")
                }
                if (parentNode.hasClass("dirty")) {
                    parentNode.removeClass("dirty")
                }
                if (s.element.hasClass("ng-dirty")) {
                    s.element.removeClass("ng-dirty")
                }
                if (s.element.hasClass("ng-valid")) {
                    s.element.removeClass("ng-valid")
                }
                if (s.element.hasClass("ng-invalid")) {
                    s.element.removeClass("ng-invalid")
                }
            };
            s.el = el;
        }
    },
    // When the bound element is inserted into the DOM...
    inserted: function (el) {
        // Focus the element
        var parentNode = $(el.parentNode);
        var paddingleft = parentNode.css("padding-left");
        var elpl = $(el).css("padding-left");
        if (el.type) {
            if (el.type === "text" || el.type === "password") {
                AttachPlacehoder($(el.parentNode), el.getAttribute("placeholder"), `left: calc(${paddingleft} + ${elpl})`);
            }
        }
    }
});